{% extends "business/circuit_order.html" %}
{% block content %}
<form id="input_form" class="form-inline" action="" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div class="row">
        <div class="col-md-4"><h5><strong>所属的客户名称：{{ customer_name }}</strong></h5></div>
        <div class="col-md-4 form-group">
            <label for="number"><strong><span style="color: red;font-weight:bold">*</span>线路编号：</strong></label>
            <input id="number" class="form-control" type="text" name="number" placeholder="线路编号 (必填)">
        </div>
    </div>
    <br>

    <div class="row">
          <div class="col-md-4 form-group">
              <label for="type">线路订单类型：</label>
              <select name="type" id="type" class="form-control">
                  <option>DIA业务</option>
                  <option>VPN业务</option>
                  <option>其他业务</option>
              </select>
          </div>
          <div class="col-md-4 form-group">
              <label for="bandwith">带宽：</label>
              <input id="bandwith" class="form-control" type="text" name="bandwith" placeholder="业务带宽">
          </div>
          <div class="col-md-4 form-group">
              <label for="status">当前状态：</label>
              <select name="status" id="status" class="form-control">
                  <option>准备测试</option>
                  <option>测试中</option>
                  <option>线路暂停</option>
                  <option>正式线路</option>
                  <option>已取消</option>
              </select>
          </div>
    </div>
    <br>

    <div class="row">
         <div class="col-md-4 form-group">
              <label for="local_isp">本地运营商：</label>
              <select name="local_isp" id="local_isp" class="form-control">
                  <option>其他运营商</option>
                  <option>中国电信</option>
                  <option>中国联通</option>
                  <option>中国移动</option>
                  <option>长城宽带</option>
                  <option>电信通</option>
              </select>
         </div>
         <div class="col-md-4 form-group">
              <label for="local_ip"><span style="color: red;font-weight:bold">*</span>客户本地IP信息(限1000字)：</label>
              <textarea id="local_ip" class="form-control" name="local_ip" rows="5" cols="40" placeholder="客户本地IP信息（必填）"></textarea>
         </div>
         <div class="col-md-4 form-group">
              <label for="hk_ip"><span style="color: red;font-weight:bold">*</span>业务的IP或者VPN帐号(限1000字)：</label>
              <textarea id="hk_ip" class="form-control" name="hk_ip" rows="5" cols="40" placeholder="分配的HKIP，tunnelIP信息等 (必填)"></textarea>
         </div>
    </div>
    <br>

    <div class="row">
        <div class="col-md-4 form-group">
            <label for="router">路由器：</label>
            <select name="router" id="router" class="form-control">
                <option>无</option>
                <option>RouterOS</option>
                <option>Cisco1921</option>
                <option>客户自有</option>
                <option>其他设备</option>
            </select>
        </div>
        <div class="col-md-4 form-group">
              <label for="mrtg">MRTG帐号：</label>
              <input id="mrtg" class="form-control" type="text" name="mrtg" placeholder="查看MRTG流量监控的帐号和密码">
        </div>
        <div class="col-md-4 form-group">
              <label for="start_test">开始测试日期：</label>
              <input id="start_test" class="form-control datepicker" type="text" name="start_test" placeholder="开始测试日期">
        </div>
    </div>
    <br>

    <div class="row">
         <div class="col-md-4 form-group">
              <label for="duration">合同签约时长：</label>
              <input id="duration" class="form-control" type="text" name="duration" placeholder="合同签约时长">
         </div>
         <div class="col-md-4 form-group">
              <label for="start_billing">开始计费日期：</label>
              <input id="start_billing" class="form-control datepicker" type="text" name="start_billing" placeholder="开始计费日期">
         </div>
         <div class="col-md-4 form-group">
            <label for="remark">备注信息(限1200字)：</label>
            <textarea id="remark" class="form-control" name="remark" rows="5" cols="40" placeholder="订单备注信息"></textarea>
         </div>
    </div>
    <br>

    <div class="row">
         <div class="col-md-8 form-group">
              <label for="attachment">上传附件：</label>
              <input id="attachment" class="form-control" type="file" name="attachment" placeholder="上传附件">
              <p id="up_file_info"></p>
         </div>
    </div>
    <div id="uploading_flag" hidden="hidden">
        <hr>
        <img id="uploading_icon" src="/static/img/uploading.gif" hidden="hidden"><span><strong>  正在提交...</strong></span>
    </div>

    <br>
    <button id="submit_button" type="submit" class="btn btn-primary">添加</button>
    <button type="reset" class="btn btn-primary">清空内容</button>
    <a class="btn btn-primary" href="/business/circuit_order" role="button">取消</a>
</form>
<script>
    $(document).ready($("#submit_button").click(
        function () {
            $("#uploading_flag,#uploading_icon").show();
        }
    ))
</script>
<script>
$(document).ready($("#submit_button").click(function () {
    $('#input_form input,textarea').each(function () {
        $(this).val($.trim($(this).val()));
    });
}));
</script>
<script>
    $(document).ready(function () {
        var
            fileInput = document.getElementById("attachment"),
            info = document.getElementById("up_file_info");

        fileInput.addEventListener('change', function () {
            if (!fileInput.value) {
                info.innerHTML = "没有选取文件";
                return;
            }

        var file = fileInput.files[0];
        var size = file.size / 1024 / 1024;
        size = size.toFixed(3);

        if (size > 15.0 ) {
            info.innerHTML = '<br>' +
                '<p><strong>文件名称: </strong>' + file.name + '</p>' +
                '<p style="color: red"><strong>文件大小: </strong>' + size + 'MB' + '</p>' +
                '<p><strong>修改日期: </strong>' + file.lastModifiedDate + '</p>' +
                '<p style="color: red"><strong>注意: </strong>' + '单个附件文档大小不能大于15MB!</p>';

            $('#attachment').val("");
        } else {
            info.innerHTML = '<br>' +
                '<p><strong>文件名称: </strong>' + file.name + '</p>' +
                '<p><strong>文件大小: </strong>' + size + 'MB' + '</p>' +
                '<p><strong>修改日期: </strong>' + file.lastModifiedDate + '</p>';
        }
        })
    })
</script>

<script>
    $(function () {
        $(".datepicker").datepicker({
            autoclose: true,
            language: "zh-CN",
            defaultViewDate: 'today',
            orientation: 'bottom',
            todayBtn: true,
            todayHighlight: true
        });
    })
</script>
{% endblock %}